<template>
    <div class="p20">
        <h4>配置管理</h4>
        <div class="flex flex-col gap-4">
            <el-card>
                <div class="settings-form">
                    <div class="form-item" v-for="(item, idx) in inputs" :key="item.key">
                        <label>{{ item.label }}：</label>
                        <input v-model="item.value" :placeholder="item.placeholder" @blur="validate(idx)"
                            :class="{ 'input-error': item.error }" />
                        <button @click="save(idx)" v-has="item.vsh">保存</button>
                        <span class="error" v-if="item.error">{{ item.error }}</span>
                        <span class="success" v-if="item.success">{{ item.success }}</span>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
export default {
  name: 'Configuration',
  data() {
    return {
      inputs: [
        {
          key: 'rate',
          label: '积分兑换比率',
          value: '',
          placeholder: '请输入积分兑换比率',
          error: '',
          success: '',
          vsh: 'config:creditRate'
        },
        {
          key: 'register',
          label: '首次注册获得积分',
          value: '',
          placeholder: '请输入首次注册获得积分',
          error: '',
          success: '',
          vsh: 'config:registerCredit'
        },
        // {
        //   key: 'parking',
        //   label: '积分兑换停车时长',
        //   value: '',
        //   placeholder: '请输入积分兑换停车时长',
        //   error: '',
        //   success: '',
        //   vsh: 'config:parkTimeRate'
        // },
        // {
        //   key: 'freeParkTime',
        //   label: '免费停车时长',
        //   value: '',
        //   placeholder: '请输入免费停车时长',
        //   error: '',
        //   success: '',
        //   vsh: 'config:freeParkTime'
        // },
        {
          key: 'freeParkTime',
          label: '积分兑换停车金额',
          value: '',
          placeholder: '请输入积分兑换停车金额',
          error: '',
          success: '',
          vsh: 'config:parkAmountRate'
        }
      ]
    }
  },
  created() {
    this.getConfigList();
  },
  methods: {
    async getConfigList() {
      const { data } = await this.$api.getPointsExchangeRate();
      this.inputs[0].value = data.result;
      const { data: data2 } = await this.$api.getFirstRegisterCredit();
      this.inputs[1].value = data2.result;
      // const { data: data3 } = await this.$api.getParkingDuration();
      // this.inputs[2].value = data3.result;
      // const { data: data4 } = await this.$api.getFreeParkTime();
      // this.inputs[3].value = data4.result;
      const { data: data5 } = await this.$api.getCreditParkAmountRate();
      this.inputs[2].value = data5.result;
    },
    validate(idx) {
      const item = this.inputs[idx];
      item.error = '';
      item.success = '';
      if (!item.value) {
        item.error = '不能为空';
        return false;
      }
      if (isNaN(item.value)) {
        item.error = '必须为数字';
        return false;
      }
      if (Number(item.value) < 0) {
        item.error = '不能为负数';
        return false;
      }
      return true;
    },
    async save(idx) {
      if (!this.validate(idx)) return;
      // 这里可以调用接口保存
      if (idx === 0) {
        await this.$api.updatePointsExchangeRate({ value: this.inputs[idx].value });
      }
      if (idx === 1) {
        await this.$api.updateFirstRegisterCredit({ value: this.inputs[idx].value });
      }
      // if (idx === 2) {
      //   await this.$api.updateParkingDuration({ value: this.inputs[idx].value });
      // }
      // if (idx === 3) {
      //   await this.$api.updateFreeParkTime({ value: this.inputs[idx].value });
      // }
      // console.log(idx)
      if (idx === 2) {
        await this.$api.updateCreditParkAmountRate({ value: this.inputs[idx].value });
      }
      // return
      this.inputs[idx].success = '保存成功！';
      this.getConfigList();
    },
  }
}
</script>

<style scoped>
.settings-form {
    max-width: 600px;
    margin: 0 auto;
}

.form-item {
    margin-bottom: 24px;
    display: flex;
    align-items: center;
}

label {
    width: 150px;
    text-align: right;
}

input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-right: 12px;
    transition: border-color 0.2s;
}

.input-error {
    border-color: #f56c6c;
}

button {
    background: #409eff;
    color: #fff;
    border: none;
    padding: 6px 16px;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 8px;
}

button:hover {
    background: #66b1ff;
}

.error {
    color: #f56c6c;
    margin-left: 8px;
    font-size: 13px;
}

.success {
    color: #67c23a;
    margin-left: 8px;
    font-size: 13px;
}

.p20 {
    padding: 20px;
}
</style>